<template>
    <div class="error-box" @click.self="closeErrorTip()">
        <div class="error-content">
            <svg t="1571107235086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2358" width="200" height="200">
                <path d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m44.245333-469.333333l159.914667-159.914667a31.274667 31.274667 0 1 0-44.245333-44.245333L512 467.754667 352.085333 307.84a31.274667 31.274667 0 1 0-44.245333 44.245333L467.754667 512l-159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333 44.245333L512 556.245333l159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333-44.245333L556.245333 512z" fill="#F5222D" p-id="2359"></path>
            </svg>
            <p>{{msg}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: ""
        };
    },
    methods:{
        closeErrorTip(){
            document.body.removeChild(this.$el);
            this.$destroy();
        }
    }
};
</script>
<style lang="less" scoped>
.error-box {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    > .error-content {
        width: 300px;
        height: 300px;
        background-color:rgba(0,0,0,0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-flow: row wrap;
        align-items:center;
        justify-content:center;
        // overflow:hidden;
        > svg {
            width: 100px;
            height: 100px;
            padding-top:20px;
        }
        >p{
            width:100%;
            text-align:center;
            padding-bottom:20px;
            color:white;
            font-size:40px;
        }
    }
}
</style>